<template>
  <div class="yy">
    <el-container>
      <el-header>
        <el-menu
          :default-active="activeIndex"
          class="el-menu-demo"
          mode="horizontal"
          @select="handleSelect"
        >
          <el-menu-item index="1"
            ><img class="a" src="../tlc/img/快递 (1).png"
          /></el-menu-item>
          <el-menu-item index="0" class="z"
            ><router-link :underline="false" to="/wlym">
              首页</router-link
            ></el-menu-item>
          <div class="dd">快速登录/注册</div>
        </el-menu>

       
      </el-header>

      <el-tabs v-model="activeName" stretch>
        <el-tab-pane  name="first">
          <el-row :gutter="24">
            <el-col :span="24">
              <el-card shadow="always" class="w">
    
     
            <el-descriptions title="我的车辆信息" direction="vertical" :column="4" border>
            <el-descriptions-item label="用户名">kooriookami</el-descriptions-item>
            <el-descriptions-item label="手机号">18100000000</el-descriptions-item>
            <el-descriptions-item label="居住地" :span="2">苏州市</el-descriptions-item>
            <el-descriptions-item label="备注">
                <el-tag size="small">学校</el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="联系地址">江苏省苏州市吴中区吴中大道 1188 号</el-descriptions-item>
            </el-descriptions>
              </el-card>
              <br />
              <br />
            </el-col>
          </el-row>
        </el-tab-pane>
      </el-tabs>

      
      <el-footer class="ss">
        <h1><img src="../tlc/img/11.png" style="width: 100%" /></h1>
      </el-footer>
    </el-container>
  </div>
</template>

<script>
import mapApi from "/src/mapApi";
import axios from "axios";
export default {
  data() {
    return {
      provinceList: [],
      cityList: [],
      countyList: [],
      activeName: "first",
      ruleForm: {
        orderId: "",
        orderNumber: "",
        orderGoodsNumber: "",
        orderUserId: "",
        orderWaybillNumber: "",
        orderPlacedate: "2022-08-17 15:36:38",
        orderProvince: "",
        orderTheCity: "",
        orderArea: "",
        orderType: "",
        orderAddresseeAddress: "",
        orderAddresseeName: "",
        orderAddresseePhone: "",
        orderReceiptProvince: "",
        orderReceiptNet: "",
        orderReceiptArea: "",
        orderRecipientDetailedAddress: "",
        orderSenderAddress: "",
        orderSenderName: "",
        orderSenderPhone: "",
        orderTheSenderAddress: "",
        orderTransportDistance: "",
        orderMapLocation: "",
        orderPaymentMethods: "",
        orderFeeAmount: "",
        orderPaymentStatus: "",
        orderWhetherInsured: "",
      },
   
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    provinceChange(that) {
      this.ruleForm.orderReceiptProvince = this.provinceList[that].name;
      this.ruleForm.orderReceiptNet = "";
      this.ruleForm.orderReceiptArea = "";
      this.cityList = this.provinceList[that].districts;
    },
    cityChange(that) {
      this.ruleForm.orderReceiptNet = this.cityList[that].name;
      this.countyList = this.cityList[that].districts;
    },
    addrChange(that) {
      this.ruleForm.orderReceiptArea = this.countyList[that].name;
      this.countyList = this.countyList[that].districts;
    },

    provinceChange(that) {
      this.ruleForm.orderProvince = this.provinceList[that].name;
      this.ruleForm.orderTheCity = "";
      this.ruleForm.orderArea = "";
      this.cityList = this.provinceList[that].districts;
    },
    cityChange(that) {
      this.ruleForm.orderTheCity = this.cityList[that].name;
      this.countyList = this.cityList[that].districts;
    },
    addrChange(that) {
      this.ruleForm.orderArea = this.countyList[that].name;
      this.countyList = this.countyList[that].districts;
    },
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    updateAndAdd() {
      //添加已成功
      console.log(this.ruleForm);
      axios
        .post("/api/network-tms-order/addOrder", this.ruleForm)
        .then((data) => {
          this.$message({
            message: "恭喜你，下单成功！！",
            type: "success",
          });
        });
    },
  },
  created() {
    this.provinceList = mapApi.keyWorlds();
  },
};
</script>

<style scoped>
.el-menu-demo{
      float: left;
  left: -10px;
      position: relative;
  width: 1460px;
  height: 7
  0px;
}
.clearfix{
   margin: 20px auto;
   float: left;
   left: 700px;
    font-size: 15px;
    color: #999d9fcf;
   position: relative;
}
.cd {
  position: relative;
  width: 430px;
  height: 50px;
}
.xm {
  position: relative;
  float: left;
  left: 100px;
}
.el-input {
  width: 330px;
  height: 50px;
  position: relative;
}
.yy {
  position: relative;
  background-color: #d8dadf6f;
}
.sen {
  position: relative;
  float: left;
  left: 1px;
  width: 120px;
}
.sh {
  position: relative;
  float: left;
  left: 20px;
  width: 120px;
}
.qq {
  position: relative;
  float: left;
  left: 30px;
  width: 150px;
}
.dx {
  width: 420px;
}
.zt {
  margin: -25px auto;
  text-align: center;
  font-size: 25px;
  color: #000;
  position: relative;
}
.q {
  position: relative;
  text-align: left;
  left: 1240px;
  font-size: 20px;
}
.fs {
  position: relative;
  text-align: left;
  left: 150px;
  font-size: 20px;
}
.ss {
  width: 1500px;
  position: relative;
}
.w {
  width: 1200px;
  height: 410px;
  position: relative;
  left: 20px;
  margin: -10px auto;
  text-align: center;
  font-size: 25px;
}
.z {
  font-size: 18px;
  color: #000;
}
.a1 {
  position: relative;
  left: 200px;
}
.a2 {
  position: relative;
  left: 330px;
}
.a3 {
  position: relative;
  left: 470px;
}
.a4 {
  position: relative;
  left: 440px;
}
.a5 {
  position: relative;
  left: 570px;
}

.dd {
  text-align: right;
}
el-menu-item {
  size: 0cm;
  color: #000;
}
.a {
  margin: -17px auto;
  left: 50%;
}
.el-button {
  line-height: 20px;
  font-size: 17px;
  color: #000;
  width: 100px;
  border-radius: 4px;
}
.el-container {
  margin: -10px auto;
  margin-left: -10px;
  margin-right: -10px;
}
.el-header,
.el-footer {
  background-color: #ffffff05;
  color: #333;
  text-align: center;
  line-height: 60px;
  border-radius: 4px;
}
</style>